{%extends "master/layout.html"%}
{% block css%}
	<style>
		.part4{
			background-color: #f6f6f6;
		}
	</style>
{%endblock%}

{%block body%}
<div class="content-list" id="content-list">
	{%for item in data%}
		<div class="item">
			<div class="news-content">
				<div class="part1">
					<a href="{{item.url}}" class="show-content">{{item.title}}</a>
					<span>--{{item.news_type.display}}--</span>
				</div>
				<div class="part2">
					{{item.summary}}<br/>
				</div>
				<div class="part3">
					<a href="#" onclick="Favor(this,{{item.id}});">赞{{item.favor_count}}</a>
					<a href="#" class="Reply" onclick="Reply(this,{{item.id}});">评论{{item.reply_count}}</a>
					<!-- django自己的时间过滤器 -->
					<span>{{item.create_date|date:"Y-m-d H:i:s"}}</span>
				</div>
				<div id="reply_detail" has-input='0' class="part4 hide">
					<div>历史评论:<br/></div>
					<div>
						<label>请输入回复内容：</label>
						<textarea></textarea>
						<input type="button" onclick="SubmitComment(this,{{item.id}});" value="提交">
					</div>
				</div>
			</div>
		</div>
		
	{%endfor%}
</div>
<!-- <div class="content-R">
	<div class="chat-area" id="chat-area">
		<div class="chat">
			<div class="chat-box">
				<div class="chat-main-box">
					<div class="chat-main-header">
						<div class="tab-public active" style="width:100%;border-top-radius:4px;">公共聊天</div>
					</div>
					<div class="title">
						新热榜 v0.1
					</div>
					<div id="chat-public-box" class="chat-public-box">
						<div class="chat-public-content ">
							
						</div>
						<div class="chat-sender">
							<div class="funcbar">
								<div class="btn btn-face"></div>
							</div>
							<div class="inputer">
								<textarea name="text"></textarea>
								<div style="text-align:right;">
									<div class="btn btn-send" tar="chat-public-content" nick="undefined" jid="" img="undefined">发送</div>
								</div>
							</div>
						</div>
					</div>
					<div class="bottom clearfix">
						<div class="left msg">
							<textarea id="message" class="text"></textarea>
						</div>
						<div class="left submit">
							<input type="button" class="btn" onclick="sendMsg();"/>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div> -->
<div class="main-content">
	<div class="content-L"></div>
	<div class="content-R">
		<div class="chat-area" id="chat-area">
			<input class="islogin" value="" type="hidden">
			<input class="slogan" value="	爱玩玩，不玩X。" type="hidden">
  				<div class="chat" data-pswp-uid="1">
  					<div class="chat-box">
  						<div class="chat-mask">
  							<div style="display:inline-block;width:30px;height:100%;background:white;"></div>
  							<div style="display:inline-block;width:30px;height:100%;background:#ededed;"></div>
  							<div style="position:absolute;width:300px;height:20px;background:white;left:-300px;top:-21px;"></div>
					</div>
					<div class="chat-main-box">
						<div class="chat-main-header">
						<div class="tab-public active" style="width:100%;border-top-radius:4px;">公共聊天</div>
						
							
						
						</div>
					</div>
					<div class="chat-public-box">
						<div id="chatpool" class="content"></div>
						<div class="chat-sender">
							<div class="funcbar">
								<div class="btn btn-face"></div>
							</div>
							<div class="inputer">
								<textarea id="message" name="text"></textarea>
								<div style="text-align:right;">
									<div class="btn btn-send">
										<input type="button" onclick="sendMsg();" value="发送"></input>
									</div>
								</div>
							</div>
						</div>
					
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 遮罩层开始 -->
<div id="shade" class="shade hide"></div>
<!-- 遮罩层结束 -->
<!-- 加载层结束 -->
<div id="loading" class="loading hide"></div>
<!-- 加载层结束 -->
<div class="w clearfix"></div>
{%endblock%}

{%block js%}
	<script type="text/javascript" src="../static/js/jquery/jquery-2.0.3.min.js"></script>
	<script type="text/javascript">
		function Favor(doc,id){
			//alert(doc+"::"+id);
			//后台数据点赞+1
			$.ajax({
				url:'/addFavor/',
				data:{nid:id},
				type:'POST',
				success:function(callback){
					//alert(callback);
					var obj = jQuery.parseJSON(callback);
					//alert('abc')
					//alert(obj)
					if (obj.status==1){
						var temp='赞'+obj.data;
						$(doc).text(temp);
					} else{
						alert(obj.msg);
					}
					
				},
				error:function(callback){
					alert(callback);
				}
			});
		}

		function Reply(doc, id){
			
			$.ajax({
				url:'/getReply/',
				data:{nid:id},
				type:'POST',
				success:function(callback){
					var obj=jQuery.parseJSON(callback);
					$(doc).parent().next().first().children().first().empty();
					$.each(obj,function(k,v){
						//$(doc).parent().next().first().text('000000')
						temp="<p>"+v.content+"::"+v.user__username+"---"+v.create_date+"---</p>";
						
						$(doc).parent().next().first().children().first().append(temp);
						
					})
					console.log(callback);
				}
			})
			$(doc).parent().next().toggleClass('hide');
			
			/* if($(content).attr('has-input')=='0'){
				$(content).append("<label>请输入回复内容：</label>");
				$(content).attr('has-input',1);
			} */
		}
		function SubmitComment(doc, id){
			var value = $(doc).prev().val()
			$("#shade,loading").removeClass('hide');
			
			$.ajax({
				url:'/submitReply/',
				data:{nid:id,data:value},
				type:'POST',
				success:function (callback){
					console.log(callback);
					callback = jQuery.parseJSON(callback);
					if(callback.status==1){
						//把数据append到评论区
						v=callback.data;
						temp="<p>"+v.content+"::"+v.user__username+"---"+v.create_date+"---</p>";
						$(doc).parent().prev().append(temp);
						count="评论"+v.reply_count;
						console.log(count);
						$(doc).parent().parent().prev().find('.Reply').text(count);
					} else {
						alert('操作失败。')
					}
				}
			})
		}

		function sendMsg(){
			var value = $('#message').val();
			$('#message').val("");
			$.ajax({
				url:'/submitChatMsg/',
				data:{data:value},
				type:'POST',
				success:function(callback){
					var callback=jQuery.parseJSON(callback);
					if (callback.status==1){
						var name=callback.data.username;
						var now=callback.data.create_date;
						var template="<div><div>"+name+"	"+now+"</div><div>"+value+"</div></div>";
						$('#chatpool').append(template);
					} else{
						alert('执行失败');
					}
					console.log(callback);
				}
			});
		}
		setInterval("going()",3000);
		window.is_first=true;
		function going(){
			if(window.is_first){
				$.ajax({
					url:'/getChats/',
					type:'POST',
					success:function(callback){
						console.log(callback);
						var callback=jQuery.parseJSON(callback);

						window.last_id=callback[0].id;
						callback=callback.reverse();

						
						$('#chatpool').empty();
						$.each(callback, function(k,v){
							/* console.log(k);
							console.log(v); */
							var value=v.content;
							var name=v.user__username;
							var now=v.create_date;
							var template="<div><div>"+name+"	"+now+"</div><div>"+value+"</div></div>";
							$('#chatpool').append(template);
						});
						window.is_first=false;
						var height=document.getElementById("chatpool").scrollHeirht();
						$("#chatpool").scrollTop(height);
					}
				})
			}else {
				//获取新增的聊天记录。
				$.ajax({
					url:'/getChats2/',
					data:{lastId:window.last_id},
					type:'POST',
					success:function(callback){
						callback=jQuery.parseJSON(callback);
						if(callback.length > 0){
							window.last_id=callback[callback.length-1].id;
							console.log(callback);
							$.each(callback, function(k,v){
								/* console.log(k);
								console.log(v); */
								var value=v.content;
								var name=v.user__username;
								var now=v.create_date;
								var template="<div><div>"+name+"	"+now+"</div><div>"+value+"</div></div>";
								$('#chatpool').append(template);
							});
						}
						var height=document.getElementById("chatpool").scrollHeirht();
						$("#chatpool").scrollTop(height);
					}
				});
			}
		}
	</script>
{%endblock%}